import React, { Component } from 'react';
import "../styles/List.scss";


import * as service from '../api/index'


class List extends Component {
    // 定义组件状态
    constructor(props) {
        super(props)
        this.state = {
            currentIndex: 0,//保存点击的一级分类的下标
            catelist: [],
            sortlist: []
        }
    }
    async componentDidMount() {
        var res1 = await service.category_list()
        console.log(res1);
        this.setState({ catelist:res1.data.list })
        var res2 = await service.category_subcate({ id:225510 })
        // console.log(res2.data);
        this.setState({ sortlist: res2.data.subcate.subcategory })
    }
    async handleClick(index, id) {
        this.setState({ currentIndex: index })
        var res2 = await service.category_subcate({ id })
        console.log(res2.data);
        this.setState({ sortlist: res2.data.subcate.subcategory })
        
    }
    render() {
        return (
            <div className='list'>
                <div className="left">
                    {
                        this.state.catelist.map((item, index) => {
                            return (
                                <div onClick={() => { this.handleClick(index, item.id) }} className={"name " + (this.state.currentIndex == index ? 'active' : '')} key={index}>{item.name}</div>
                            )
                        })
                    }
                </div>

                <div className="right">
                    {
                        //二级分类
                        this.state.sortlist.map((sort, index) => {
                            return (
                                <div className='sortbox' key={index}>
                                    <h3>{sort.name}</h3>
                                    <div className="goodsbox">
                                        {
                                            //sort.gooodslist是二级分类的三级分类列表
                                            //gooodslist是每个三级分类
                                            sort.subNavs.map((goods, index) => {
                                                return (
                                                    <div className="goods" key={index}>
                                                        <img src={goods.pic} alt="" />
                                                        <div className="name">
                                                            {goods.name}
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>

            </div>
        );
    }
}

export default List;